<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>2117317211胡昕</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        function calc() {
            // 1.把用户输入的工资拿到
            w = document.getElementById("wage").value;
            wnum = parseInt(w); //把字符串变成数字
            // 2.开始计算
            Pensur01 = wnum * 0.08; //养老保险个人
            Censur01 = wnum * 0.2; //养老保险公司

            Pmesur02 = wnum * 0.02; //医疗保险个人
            Cmesur02 = wnum * 0.06; //医疗保险公司

            Punsur03 = wnum * 0.005; //失业保险个人
            Cunsur03 = wnum * 0.015; //失业保险公司

            Cemsur04 = wnum * 0.005; //工伤保险公司

            Cbirsur05 = wnum * 0.008; //生育保险公司

            Paccfund06 = wnum * 0.12; //个人公积金
            Caccfund06 = wnum * 0.12; //公司公积金
            //个人and公司合计
            Ptotal07 = Pensur01 + Pmesur02 + Punsur03 + Paccfund06;
            Ctotal07 = Censur01 + Cmesur02 + Cunsur03 + Cemsur04 + Cbirsur05 + Caccfund06;
            //总额
            total_sum08 = wnum + Ctotal07;
            // 3.把计算结果放到单元格里
            document.getElementById('Pensur').innerText = Pensur01;
            document.getElementById('Censur').innerText = Censur01;

            document.getElementById('Pmesur').innerText = Pmesur02;
            document.getElementById('Cmesur').innerText = Cmesur02;

            document.getElementById('Punsur').innerText = Punsur03;
            document.getElementById('Cunsur').innerText = Cunsur03;

            document.getElementById('Cemsur').innerText = Cemsur04;

            document.getElementById('Cbirsur').innerText = Cbirsur05;

            document.getElementById('Paccfund').innerText = Paccfund06;
            document.getElementById('Caccfund').innerText = Caccfund06;

            document.getElementById('Ptotal').innerText = Ptotal07;
            document.getElementById('Ctotal').innerText = Ctotal07;

            document.getElementById('total_sum').innerText = total_sum08;

        }
    </script>

</head>

<body>
    <div class='container text-center'>
        <h1>个人社保计算软件-Web版-2117317211胡昕</h1>
        <table class='table table-bordered text-center'>
            <tr>
                <td>工资</td>
                <td colspan="3">
                    <input id='wage' class='form-control' type="text" placeholder="请输入工资">
                </td>
                <td><button onclick="calc()" class='btn btn-danger btn-block'>计算</button></td>
            </tr>
            <tr class='bg-primary'>
                <td>险种</td>
                <td>个人%</td>
                <td>个人</td>
                <td>公司%</td>
                <td>公司</td>
            </tr>
            <tr>
                <td>养老</td>
                <td>8%</td>
                <td id='Pensur'></td>
                <td>20%</td>
                <td id='Censur'></td>
            </tr>
            <tr>
                <td>医保</td>
                <td>2%</td>
                <td id='Pmesur'></td>
                <td>6%</td>
                <td id='Cmesur'></td>
            </tr>
            <tr>
                <td>失业</td>
                <td>0.5%</td>
                <td id='Punsur'></td>
                <td>1.5%</td>
                <td id='Cunsur'></td>
            </tr>
            <tr>
                <td>工伤</td>
                <td></td>
                <td></td>
                <td>0.5%</td>
                <td id='Cemsur'></td>
            </tr>
            <tr>
                <td>生育</td>
                <td></td>
                <td></td>
                <td>0.8%</td>
                <td id='Cbirsur'></td>
            </tr>
            <tr>
                <td>公积金</td>
                <td>12%</td>
                <td id='Paccfund'></td>
                <td>12%</td>
                <td id='Caccfund'></td>
            </tr>
            <tr>
                <td>合计</td>
                <td>个人合计</td>
                <td id='Ptotal'></td>
                <td>公司合计</td>
                <td id='Ctotal'></td>
            </tr>
            <tr>
                <td>总额</td>
                <td colspan="4" id='total_sum'></td>
            </tr>
        </table>
    </div>
</body>

</html>